<template>
  <div class="card-wrap flex relative pointer" @click="goProductDetail">
    <template v-if="isTop">
      <div class="isTop flex">
        <div class="left">
          <img alt="Shop Meet50off" v-lazy="leftImage" lazy="loaded">
        </div>
        <div class="right">
          <div class="r-top twoLine" :title="headLine">
            {{headLine}}
          </div>
          <div class="r-middle flex">
            <div class="price">
              <span class="price-origin">${{originalPrice}}</span>
              <span class="price-present">${{price}}</span>
            </div>
            <div class="discount-price">
              <span class="discount-badge red">{{(discountRate * 100) | toFixed}}% OFF</span>
            </div>
          </div>
          <div class="r-bottom">
            <img src="./go_black_friday.png" alt="Shop Meet50off">
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="noTop flex">
        <div class="left">
          <img alt="Shop Meet50off" v-lazy="leftImage" lazy="loaded">
        </div>
        <div class="right">
          <div class="r-top-head">
            <img src="./blackfriday.png" alt="Shop Meet50off">
          </div>
          <div class="r-top twoLine" :title="headLine">
            {{headLine}}
          </div>
          <div class="r-middle">
            <div class="price">
              <span class="price-origin">${{originalPrice}}</span>
              <span class="price-present">${{price}}</span>
            </div>
            <div class="discount-price">
              <span class="discount-badge red">{{(discountRate * 100) | toFixed}}% OFF</span>
            </div>
          </div>
        </div>
        <div class="abs">
          <img src="./shop_now.png" alt="Shop Meet50off">
        </div>
      </div>
    </template>
  </div>
</template>
<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex'
  export default {
    name: 'product',
    props: {
      isTop: {
        type: Boolean,
        default: false
      },
      data: Object
    },
    computed: {
      leftImage() {
        if (this.data && this.data.image) {
          return imgUrl + this.data.image.src + '?x-oss-process=image/resize,h_210,limit_0'
        }
      },
      headLine() {
        return this.checkData('headLine')
      },
      originalPrice() {
        return this.checkData('originalPrice')
      },
      price() {
        return this.checkData('price')
      },
      discountRate() {
        return this.checkData('discountRate')
      }
    },
    methods: {
      checkData(attr) {
        if (this.data) {
          if (this.data[attr] !== undefined && this.data[attr] !== null) {
            return this.data[attr]
          }
        }
      },
      goProductDetail() {
        this.$router.push({
          path: `/activity/${this.data.urlKeyWords}/${this.data.sku}`
        })
        this.setCurItem(this.data)
      },
      ...mapMutations({
        setCurItem: 'SET_FEATURED_LIST',
      })
    },
    filters: {
      toFixed(value) {
        if (isNaN(value)) return ''
        return value.toFixed(0)
      }
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
.flex {
  display: flex
}
.pointer{
  cursor: pointer
}
.red{
  color: #fb333e
}
.relative{
  position: relative
}
.abs{
  position: absolute
  bottom: 2px;
  left: -8px;
}
.twoLine { /*兩行超出部分隱藏實現三個點*/
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-wrap{
  align-items: center;
  overflow hidden
  width: 100%;
  box-sizing border-box
  height: 155px
  /*background-color: #bfbfbf*/
  background-color: #fff
  /*border: 2px solid #22ac38*/
  border: 2px solid #656565
  margin-bottom: 10px;
}
.isTop {
  .left{
    width: 116px
    height: 125px;
    background: #fff
    margin-left: 15px;
    transition: all 0.3s;
    box-sizing: border-box;
    text-align: center
    img{
      max-width: 116px
      max-height: 125px
    }
  }
  .left:hover {
    transform: scale(1.03)
  }
  .right{
    padding-left: 15px;
    flex: 1
    .r-top{
      font-family: SimSun;
      font-size: 15px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 22px;
      letter-spacing: 0px;
      /*color: #eaedec;*/
      color: #333;
    }
    .r-middle {
      margin-top:10px
    }
    .r-bottom{
      overflow: hidden;
      display: inline-block;
      /*background: #fff100;*/
      margin-top: 16px;
      /*border: 1px solid #22ac38;*/
      img{
        margin-left: -30px
      }
    }
  }
}
.noTop{
  .left{
    width: 85px
    height: 89px;
    background: #fff
    margin-left: 15px;
    transition: all 0.3s
    img{
      max-width: 85px
      max-height: 89px
    }
  }
  .left:hover {
    transform: scale(1.03)
  }
  .right{
    padding-left: 15px;
    .r-top-head{
      height: 18px
      img{
        height: 100%
      }
    }
    .r-top{
      font-family: SimSun;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 0px;
      color: #333
    }
    .r-middle {
      margin-top: 10px
      .price{
        padding: 2px 5px;
        padding-left: 0;
        background: #fff;
        .price-origin{
          font-size 12px
          text-decoration: line-through
          color: #98999a
          /*color: #333*/
        }
        .price-present{
          color: #18823a
          padding-left: 5px
          font-weight bold
        }
      }
      .discount-price{
        background: #fff;
        margin-top: 5px;
        /*padding: 7px 5px;*/
        padding-left: 0
        padding-bottom: 12px;
        font-size: 12px;
        > span{
          border: 1px solid
          padding: 2px 7px;
          font-size 12px
          border-radius: 3px;
        }
      }
    }
    .r-bottom{

    }
  }
}
.isTop
  .price
    font-size: 20px
    margin-right: 40px;
    padding: 2px 5px;
    padding-left: 0;
    background: #fff;
    .price-origin
      font-size 16px
      text-decoration: line-through
      color: #98999a
    .price-present
      color: #18823a
      padding-left: 5px
      font-weight bold
  .discount-price
    background: #fff;
    padding: 2px 5px;
    display: flex;
    font-size: 14px;
    > span
      border: 1px solid
      padding: 2px 7px;
      font-size 12px
      border-radius: 3px;
</style>
